{% if articles and articles.length %}
<style>
    .article-content-and-img {
        display: flex;
        margin-bottom: 8px;
    }

    .article-content-and-img .article-title {
        margin-top: 0;
    }

    .article-title-summary {
        flex: 1;
    }

    .article-meta {
        display: flex;
    }

    .article-view-like {
        flex: 1;
    }

    .article-content {
        margin-bottom: 0;
    }

    .more-btn-box {
        position: relative;
    }
</style>

<div class="article-list">
    {% for article in articles %}
    <div class="article-list-item" {% if article.coverURL %} style="min-height: 145px;" {% endif %}>
        <div class="article-content">
            <div class="article-content-and-img">
                <div class="article-title-summary">
                    <a href="/p/{{article.id}}" target="_blank" class="article-title">{{article.name}}</a>
                    <p class="article-content">{{article.summary}}...</p>
                </div>
                {% if article.coverURL %}
                <a class="article-img" target="_blank" href="/p/{{article.id}}">
                    <img src="{{article.coverURL}}" />
                </a>
                {% endif %}
            </div>

            <div class="article-meta">
                <a href="/p/{{article.id}}" target="_blank"><i class="iconfont ic-list-read"></i> {{article.browseCount  | defaultValue(0)}}</a>
                {% if article.user and article.user.username %}
                <a href="/uc/{{article.user.id}}" target="_blank" class="article-username">{{article.user.username}}</a>
                {% endif %}
                <a href="/p/{{article.id}}#comments" target="_blank">
                    <i class="iconfont ic-list-comments"></i>
                    {{article.commentCount | defaultValue(0)}}
                </a>
                <a href="javascript:void(0)" style="color: #b4b4b4; cursor: default;">
                    <img src="{{imgPath}}/article/zan.svg" style="width: 12px;" /> {{article.likedCount | defaultValue(0)}}
                </a>
                <span class="time">{{article.createdAt | recentTime('YYYY.MM.DD HH:mm')}}</span>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}